<template>
	<view class="verify-role ">
	   <view class="verify-role-item flex--col verify-role--volunteer"  v-if="status === VERIFY_VOLUNTEER">
		   <VerifyExplain :status="status"></VerifyExplain>
		   <VerifyInput @validateCaptcha="$emit('validateCaptcha')" ></VerifyInput>
	   </view>
	   <view class="verify-role-item flex--col verify-role--blind"  v-if="status === VERIFY_BLIND" >
		   <VerifyCode>
			   <slot></slot>
			</VerifyCode>
		   <VerifyExplain :status="status" ></VerifyExplain>
	   </view>
	   <view class="verify-role-item"  v-if="status === VERIFY_SUCCESS">
			<VerifyExplain :status="status" ></VerifyExplain>
	   </view>
	</view>
</template>

<script>
	import VerifyInput from "./VerifyInput.vue"
	import VerifyCode from "./VerifyCode.vue"
	import VerifyExplain from "./VerifyExplain.vue"
	import {VERIFY_VOLUNTEER,VERIFY_BLIND,VERIFY_SUCCESS} from "@/core/constant/travel.js"
	
	export default {
		components:{
			VerifyInput,
			VerifyCode,
			VerifyExplain
		},
		data(){
			return {
				VERIFY_VOLUNTEER,
				VERIFY_BLIND,
				VERIFY_SUCCESS
			}
		},
		emits:['validateCaptcha'],
		props:['status']
	}
</script>

<style lang="scss" scoped>
	.verify-role{
		height:100%;
	}
	
	.verify-role-item{
		align-items: center;
		gap:20%;
		height:100%;
	}
</style>